<template>
  <div>
    <dhsHeader :type="1"
               :Data="headerData"></dhsHeader>
    <div class="item-card">
      <div data-v-16ed3c2b="" @click="clickAllClass" class="all-class">
        <span data-v-16ed3c2b="" class="text">{{dhs_rank.alias||'筛选等级'}}</span>
        <i class="icon-right"></i>
      </div>
      <form action v-on:submit.prevent>
        <search-box @search="search" :placeholder="Placeholder" v-model="keyWord"></search-box>
      </form>
    </div>
    <div class="user-list"
         v-show="list.length">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item clearfix">
          <div class="levelimg fl">
            <img :src="item.headimgurl"
                 v-if="item.headimgurl"
                 width="100%"
                 alt />
            <img :src="defaultPhotoImg"
                 v-else
                 width="100%"
                 alt />
          </div>
          <div class="levelinfo fl">
            <p>
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p>
              <span>用户ID：</span>
              <span>{{item.user_id}}</span>
            </p>
            <p v-if="item.mobile && is_hide_member_phone == 0">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <p>
              <span>级别：</span>
              <span>{{item.rank_name}}</span>
            </p>
            <p>
              <span>地区：</span>
              <span>{{item.country}}{{item.province}}{{item.city}}</span>
            </p>
            <p>
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p class="check_detail" v-if="item.allow_dhs_list && item.allow_dhs_list.length > 0">
              <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary"
                @click="dhsRankShow(item)">设置为{{headerData.dhs_name}}</van-button>
            </p>
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>

    <!-- 等级popup -->
    <van-popup v-model="showAllClass" round position="bottom">
      <van-picker show-toolbar :columns="classRes" @cancel="onCancel" @confirm="onConfirm"/>
    </van-popup>
    <!-- 设置订货商 -->
    <van-popup v-model="dhsRank" round position="bottom">
      <van-picker  :title="`设置${headerData.dhs_name}`" show-toolbar :columns="re_typeArr" @cancel="onCancelDhs" @confirm="setDhsClick"/>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Popup, Picker } from 'vant'
Vue.use(Popup).use(Picker)
import dhsHeader from '@/views/user/dhs/components/dhsHeader/index'
import noData from '@/components/noData/index'
import searchBox from '@/views/user/components/search/index'
import Scroll from '@/components/scroll/index'
import { getNextLevelVenderUser, setUserLowerDhs } from '@/api/user/dhs/dhsApi'

export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/user/default_photo_img.jpg',
      is_hide_member_phone: undefined,
      noData: {
        text: '暂无会员',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_user_data.png',
        marginTop: '10em'
      },
      headerData: {
      },
      Placeholder: '',
      keyWord: '',
      type: 1,
      p: 2,

      loading: false,
      finished: false,
      error: false,
      list: [],
      dhsGrades: [],
      activeRankIndex: 0,
      dhs_rank: '',
      showAllClass: false,
      classRes: [],
      nextLevelId: undefined, // 下级订货商id
      dhsRank: false, // 设置订货商弹窗
      selected: 0,
      dhs_whole: [],
      re_typeArr: [],
      user_id: ''
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const data = {}
      if (this.dhs_rank) {
        data.rank_id = this.dhs_rank.rank_id
      }
      this.nextLevelId = this.$route.query.nextLevelId
      if (this.nextLevelId) {
        data.nextLevelId = this.nextLevelId
      }
      getNextLevelVenderUser(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          wx.setNavigationBarTitle({
            title: res.data.ftitle_dhs_user
          })
          this.is_hide_member_phone = res.data.is_hide_member_phone
          // 头部和导航数据
          this.headerData = res.data
          // 搜索
          this.Placeholder = `请输入${res.data.ftitle_dhs_member}ID/昵称`
          // 列表
          this.list = res.data.user_list
          // 其它
          if (!this.list.length) {
            this.finished = true
          }
          // 订货商等级数据
          if (res.data.rank_list) {
            this.dhsGrades = [{
              alias: '全部等级',
              rank_id: '0'
            }].concat(res.data.rank_list)
            this.classRes = this.dhsGrades.map(x => {
              x.text = x.alias
              return x
            })
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    dhsRankShow(data) {
      this.dhs_whole = data.allow_dhs_list
      this.user_id = data.user_id
      const newArr = this.dhs_whole.map(item => {
        return item.rank_name
      })
      this.re_typeArr = newArr
      this.dhsRank = true
    },
    setDhsClick(val, idx) {
      // console.log(val, idx)
      // console.log(this.dhs_whole[idx])
      this.$loadingWrap.show()
      setUserLowerDhs({
        user_id: this.user_id,
        rank_grade: this.dhs_whole[idx].rank_grade
      }).then(res => {
      this.$loadingWrap.close()
        if (res.status == 1) {
          this.dhsRank = false
          this.init()
        } else {
          this.$Error(res.msg)
        }
      })
      .catch(() => {
        this.error = true
      })
    },
    onCancelDhs() {
      this.dhsRank = false
      this.dhs_whole = []
      this.user_id = ''
    },
    onLoad() {
      const data = {
        p: this.p,
        nextLevelId: this.nextLevelId,
        keyword: this.keyWord
      }
      if (this.dhs_rank) {
        data.rank_id = this.dhs_rank.rank_id
      }
      getNextLevelVenderUser(data)
        .then(res => {
          this.loading = false
          if (res.data.user_list.length) {
            this.list = this.list.concat(res.data.user_list)
            this.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    },
    search(e) {
      this.p = 1
      this.finished = false
      const data = {
        p: this.p,
        nextLevelId: this.nextLevelId,
        keyword: this.keyWord
      }
      if (this.dhs_rank) {
        data.rank_id = this.dhs_rank.rank_id
      }
      this.$loadingWrap.show()
      getNextLevelVenderUser(data)
        .then(res => {
          this.loading = false
          this.headerData = res.data
          this.list = res.data.user_list
          if (res.data.user_list.length) {
            this.p++
          } else {
            this.finished = true
          }
          this.$loadingWrap.close()
        })
        .catch(() => {
          this.error = true
          this.$loadingWrap.close()
        })
    },
    clickAllClass() {
      this.showAllClass = true
    },
    onCancel() {
      this.showAllClass = false
    },
    onConfirm(val, idx) {
      if (this.activeRankIndex == idx) return
      this.activeRankIndex = idx
      this.dhs_rank = val
      this.showAllClass = false
      this.search()
    }
  },
  components: {
    dhsHeader,
    noData,
    searchBox,
    Scroll
  }
})
</script>

<style lang="scss">
@import "src/styles/user/cardList/index.scss";

.item-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 20px 10px;
  background-color: #fff;
  border-top: 1px solid #EDEDED;
  i.icon-right{
    margin-left:15px;
    transform:rotate(45deg);
  }
  .all-class {
    width: 170px;
    height: 66px;
    color: #666;
    text-align: center;
    font-size: 24px;
    border:2px solid #EDEDED;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 66px;
    .text {
      display: inline-block;
      max-width: 145px;
      @include showEllipsis;
    }
    .svg-icon {
      width: 20px;
      margin-left:4px;
      transform: rotateZ(90deg);
    }
  }
  form {
    flex: 1;
    margin-left: 20px;
  }
}
</style>
